<!--  -->
<template>
  <div class="goods-wrap">
    <div class="goods">
      <!-- 左边菜单栏 -->
      <div class="menu-wrap">
        <ul>
          <li v-for="(item,i) in GoodsInfo" :key="i" class="menu-item"
          :class="{'current':currentIndex === i}" @click="selectMenu(i)">
            <span class="text"><span v-show="item.type>0" class="icon"
              :class="classMap[item.type]"></span>{{item.name}}
            </span>
          </li>
        </ul>
      </div>
      <!-- 右边具体食品 -->
      <div class="foods-wrap" ref="foodswrap">
        <ul>
          <li v-for="(item,i) in GoodsInfo" :key="i" class="foods-list food-list-hook" ref="list">
            <h1 class="title">{{item.name}}</h1>
              <ul>
                <li @click="selectFood(food)" class="foods-item border-1px" v-for="(food,i) in item.foods" :key="i">
                  <img :src="food.icon"/>
                  <div class="content">
                    <h2 class="name">{{ food.name }}</h2>
                    <p class="desc" v-show="food.description">{{ food.description }}</p>
                    <div class="extra">
                      <span>月售{{ food.sellCount }}份</span>
                      <span>好评率{{ food.rating }}%</span>
                    </div>
                    <div class="price">
                      <span class="new-price">￥{{ food.price }}</span>
                      <span class="old-price" v-show="food.oldPrice">￥{{ food.oldPrice }}</span>
                      <div class="control-wrap">
                        <cartcontrol :food="food"></cartcontrol>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
          </li>
        </ul>
      </div>
    </div>
    <food :food="selectedFood" ref="food"></food>
  </div>
</template>

<script>
import cartcontrol from "../cartcontrol/cartcontrol.vue";
import food from "../food/food.vue";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      GoodsInfo: [],
      classMap: ["decrease", "discount", "special", "invoice", "guarantee"],
      listHeight: [],
      scrollY: 0,
      // 被选中的食物
      selectedFood: {}
    };
  },
  components: { cartcontrol, food },
  props: ["seller"],
  methods: {
    // 获取商品信息
    getGoods() {
      this.$http.get("/api/goods").then(result => {
        if (result.status === 200) {
          this.GoodsInfo = result.body.data;
          this.$nextTick(() => {
            this._initScroll();
            this._getListHeight();
          });
        }
      });
    },
    // 点击左侧菜单，跳转到对应的分类食品栏
    // 1.将循环创建的菜单栏元素的索引作为参数传入
    // 2.获取foodslist中对应索引的offsetTop值
    // 3.点击菜单栏时，offsetTop值赋值给右侧的scrollTop
    selectMenu(i) {
      let foodList = this.$refs.foodswrap.getElementsByClassName(
        "food-list-hook"
      );
      let el = foodList[i];
      this.foodScroll.scrollToElement(el, 100);
    },
    // 点击商品显示商品详情页面
    selectFood(food) {
      this.selectedFood = food;
      // 调用food组件的show方法显示food组件
      this.$refs.food.show();
    },
    // 左右两个菜单的滚动效果
    _initScroll() {
      this.meunScroll = new BScroll(".menu-wrap", {
        click: true
      });
      this.foodScroll = new BScroll(".foods-wrap", {
        click: true,
        // 探针作用，实时监测滚动位置
        probeType: 3
      });
      this.foodScroll.on("scroll", pos => {
        // scrollY接收变量
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    // 将每个分类的食品的offsetTop依次添加到foodslist中，组成一个foodslist数组
    _getListHeight() {
      let foodList = this.$refs.foodswrap.getElementsByClassName(
        "food-list-hook"
      );
      for (let i = 0; i < foodList.length; i++) {
        this.listHeight.push(foodList[i].offsetTop);
      }
    }
  },
  computed: {
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          return i;
        }
      }
      return 0;
    }
  },
  created() {
    this.getGoods();
  }
};
</script>
<style lang='less' scoped>
@import "../../common/css/common.less";
.goods-wrap {
  position: absolute;
  top: 174px;
  left: 0;
  right: 0;
  bottom: 0;
  .goods {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 46px;
    display: flex;
    overflow: hidden;
    width: 100%;
    .menu-wrap {
      flex: 0 0 80px;
      background-color: #f3f5f7;
      //隐藏滚动条，兼容性？
      // overflow: auto;
      // &::-webkit-scrollbar {
      //   display: none;
      // }
      .menu-item {
        display: table;
        text-align: center;
        width: 80px;
        height: 56px;
        padding: 0 12px;
        box-sizing: border-box;
        vertical-align: bottom;
        &.current {
          position: relative;
          z-index: 10;
          background-color: #fff;
          font-weight: 700;
          margin-top: -1px;
          .text {
            border: none;
          }
        }
        .font-style(0,14px,200);
        .icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          margin-right: 2px;
          vertical-align: bottom;
          background-size: 12px 12px;
          &.decrease {
            .bg-image("decrease_3");
          }
          &.discount {
            .bg-image("discount_3");
          }
          &.guarantee {
            .bg-image("guarantee_3");
          }
          &.invoice {
            .bg-image("invoice_3");
          }
          &.special {
            .bg-image("special_3");
          }
        }
        .text {
          display: table-cell;
          vertical-align: middle;
          text-align: left;
          font-size: 12px;
        }
      }
    }
    .foods-wrap {
      flex: 1;
      // overflow-y: auto;
      //隐藏滚动条，兼容性？
      // &::-webkit-scrollbar {
      //   display: none;
      // }
      .foods-list {
        .title {
          height: 26px;
          padding-left: 12px;
          border-left: 2px solid #d9dde1;
          background-color: #f3f5f7;
          .font-style(12px,26px);
          color: rgb(147, 153, 159);
        }
        .foods-item {
          margin: 18px;
          padding-bottom: 18px;
          font-size: 0;
          // overflow-x: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          display: flex;
          .border-1px(rgba(7,17,27,0.2));
          &:last-child {
            padding-bottom: 0;
            &::after {
              display: none;
            }
          }
          img {
            margin-right: 10px;
            width: 57px;
            height: 57px;
            vertical-align: top;
          }
          .content {
            flex: 1;
            .name {
              margin: 2px 0 8px;
              .font-style(14px,14px);
              color: rgb(7, 17, 27);
            }
            .desc,
            .extra {
              margin-bottom: 8px;
              .font-style(10px,12px);
              color: rgb(147, 153, 159);
            }
            .extra {
              margin-bottom: 6px;
              &:first-child {
                margin-right: 12px;
              }
            }
            .price {
              .new-price {
                margin-right: 8px;
                .font-style(14px,24px,700);
                color: red;
              }
              .old-price {
                .font-style(10px,24px,700);
                color: rgb(147, 153, 159);
                text-decoration: line-through;
              }
              .control-wrap {
                position: absolute;
                right: 20px;
                display: inline-block;
                vertical-align: top;
              }
            }
          }
        }
      }
    }
  }
}
</style>